{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>

    <style>

        /* 数据概览 */
        .layui-dvbt1 {
            height: 500px !important;
        / / 提高指定样式规则的应用优先权 !important background-color: #fff;
        }


        /* 控制台效果报告 */
        .layui-trs {
            padding-top: 5px;
        }

        .layui-trs .layui-progress {
            margin: 50px 0 60px;
        }

        .layui-trs .layui-progress:last-child {
            margin-bottom: 10px;
        }

        .layui-trs .layui-progress h3 {
            position: absolute;
            right: 0;
            top: -35px;
            color: #999;
            font-size: 14px;
        }

        .layui-trs .layui-progress-bar {
            text-align: left;
        }

        .layui-trs .layui-progress-text {
            top: -35px;
            line-height: 26px;
            font-size: 26px;
        }


    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartZhu">
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">版本信息</div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">实时监控</div>
                <div class="layui-card-body layui-trs">
                    <div class="layui-progress" lay-showPercent="yes">
                        <h3>CPU使用率</h3>
                        <div class="layui-progress-bar" lay-percent="58%"></div>
                    </div>
                    <div class="layui-progress" lay-showPercent="yes">
                        <h3>内存占用率</h3>
                        <div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览1111</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartZhu1111">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">数据概览3333</div>
                <div class="layui-card-body">
                    <div class="layui-dvbt1 " id="EchartZhu3333">
                    </div>

                </div>
            </div>

        </div>


        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览2222</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartZhu2222">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">数据概览4444</div>
                <div class="layui-card-body">
                    <div class="layui-dvbt1 " id="EchartZhu4444">
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览6666</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartZhu6666">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">数据概览5555</div>
                <div class="layui-card-body">
                    <div class="layui-dvbt1 " id="EchartZhu5555">
                    </div>

                </div>
            </div>

        </div>

        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览7777</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartZhu7777">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">数据概览8888</div>
                <div class="layui-card-body">
                    <div class="layui-dvbt1 " id="EchartZhu8888">
                    </div>

                </div>
            </div>

        </div>


        <!-- 可以接着加图 -->

    </div>
</div>
</body>

<script type="text/javascript">

    //全局定义一次, echarts  , 引入图表 js
    layui.config({
        base: "{%static '/layui/echarts5.3.3/' %}"  //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        echarts: 'echarts'
    });

    layui.use(['form', 'layer', 'table', "echarts", 'laytpl', 'laydate', 'carousel'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table,
            carousel = layui.carousel,
            laydate = layui.laydate;
        var echarts = layui.echarts;

        var chartZhu = echarts.init(document.getElementById('EchartZhu'));
        //指定图表配置项和数据
        var optionChart = {
            title: {
                text: '今日流量趋势',
                x: 'center',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['', '']
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: 'PV',
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: [111, 222, 333, 444, 555, 666, 3333, 33333, 55555, 66666, 33333, 3333, 6666, 11888, 26666, 38888, 56666, 42222, 39999, 28888, 17777, 9666, 6555, 5555, 3333, 2222, 3111, 6999, 5888, 2777, 1666, 999, 888, 777]
            }, {
                name: 'UV',
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: [11, 22, 33, 44, 55, 66, 333, 3333, 5555, 12666, 3333, 333, 666, 1188, 2666, 3888, 6666, 4222, 3999, 2888, 1777, 966, 655, 555, 333, 222, 311, 699, 588, 277, 166, 99, 88, 77]
            }]
        }
        chartZhu.setOption(optionChart, true);


        ////
        var chartZhu1111 = echarts.init(document.getElementById('EchartZhu1111'));
        //指定图表配置项和数据
        var optionChart1111 = {
            title: {
                text: '访客浏览器分布',
                x: 'center',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['Chrome', 'Firefox', 'IE 8.0', 'Safari', '其它浏览器']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                    {value: 9052, name: 'Chrome'},
                    {value: 1610, name: 'Firefox'},
                    {value: 3200, name: 'IE 8.0'},
                    {value: 535, name: 'Safari'},
                    {value: 1700, name: '其它浏览器'}
                ]
            }]
        }

        chartZhu1111.setOption(optionChart1111, true);


        ////
        var chartZhu2222 = echarts.init(document.getElementById('EchartZhu2222'));
        //指定图表配置项和数据
        var optionChart222 = {
            title: {
                text: '最近一周新增的用户量',
                //x: 'center',  // 居中显示
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: { //提示框
                trigger: 'axis',

            },
            legend: {
                data: ['Email', 'Search Engine']
            },
            toolbox: {    // 保存图片
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: [{ //X轴
                type: 'category',
                data: ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']
            }],
            yAxis: [{  //Y轴
                type: 'value'
            }],
            series: [
                { //内容
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [200, 300, 400, 610, 150, 270, 380],
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        }
        chartZhu2222.setOption(optionChart222, true);


        var chartZhu3333 = echarts.init(document.getElementById('EchartZhu3333'));
        //指定图表配置项和数据
        var optionChart3333 = {
            title: {
                text: '商品订单'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '销量',
                type: 'bar',
                data: [100, 200, 300, 400, 500, 600, 700],
                itemStyle: {
                    normal: {
                        color: 'red'
                    }
                }
            }, {
                name: '产量',
                type: 'bar',
                data: [120, 210, 340, 430, 550, 680, 720],
                itemStyle: {
                    normal: {
                        color: 'blue'
                    }
                }
            }]
        };
        chartZhu3333.setOption(optionChart3333, true);

        //////
        var chartZhu4444 = echarts.init(document.getElementById('EchartZhu4444'));
        //指定图表配置项和数据
        const pointerData = 90 ; // 仪表指针数据
        var optionChart4444 = {
            backgroundColor: "#fff",
            series: [{
                type: "gauge",
                radius: 150,
                z: 1,
                startAngle: 225,
                endAngle: -45,
                splitNumber: 50,
                title: {
                    color: 'red',
                },
                splitLine: {
                    show: true,
                    length: 15,
                    distance: -10,
                    lineStyle: {
                        color: "#fff",
                        width: 1
                    }
                },
                detail: {
                    show: true,
                    offsetCenter: [0, 60],
                    fontSize: 22,
                    formatter: val => [`{a|${val}}`, `{b|% test}`].join(''),    // ${val}  控制的是 指针 下面的 数值
                    rich: {
                        a: {
                            fontSize: 20,
                            color: 'rgba(84, 108, 198, 0.65)',
                        },
                        b: {
                            fontSize: 20,
                            color: 'rgba(84, 108, 198, 0.65)',
                        }
                    },
                },
                // 仪表盘的线，颜色值为一个数组
                axisLine: {
                    show: true,
                    // 两端是否设置为圆角；在5.0之后的版本有效
                    roundCap: false,
                    lineStyle: {
                        width: 15,
                        shadowColor: '#0093ee', //默认透明
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        opacity: 1,
                        color: [
                            [ pointerData / 100, {    // pointerData / 100  为 仪表盘 上的 值
                                x: 0,
                                y: 0,
                                x1: 1,
                                y1: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 255, 0.6)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 0, 255, .6)'
                                }]
                            }],
                            [1, "rgba(0,0,0,0.15)"]
                        ]
                    }
                },
                // 仪表盘刻度标签
                axisLabel: {
                    show: true,
                    color: "rgba(84, 108, 198, 0.65)",
                    fontSize: 14,
                    distance: 20,
                    formatter: val => {
                        const num = Math.floor(val);
                        return num % 20 === 0 ? num : "";
                    }
                },
                // 刻度
                axisTick: {
                    show: false
                },
                // 指针，此设置仅对5.0以上的版本生效
                anchor: {
                    show: true,
                    icon: "circle",
                    showAbove: true,
                    size: 20,
                    itemStyle: {
                        borderWidth: 6,
                        borderColor: "rgba(84, 108, 198, 0.85)"
                    }
                },
                data: [pointerData]
            },
                {
                    // 背景渐变色
                    type: "pie",
                    radius: "80%",
                    // 不响应及触发鼠标事件
                    silent: true,
                    // 关闭背景动画
                    animation: false,
                    z: 0,
                    itemStyle: {
                        color: {
                            type: "radial", // 径向渐变
                            x: 0.5,
                            y: 0.5,
                            r: 0.25,
                            colorStops: [{
                                offset: 0,
                                color: "rgba(84, 103, 198, 0.6)"
                            },
                                {
                                    offset: 0.1,
                                    color: "rgba(84, 103, 198, 0.35)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(84, 103, 198, 0)"
                                }
                            ]
                        }
                    },
                    data: [pointerData]
                }
            ]
        };
        chartZhu4444.setOption(optionChart4444, true);


        /////
        var chartZhu5555 = echarts.init(document.getElementById('EchartZhu5555'));
        var data = {
            title: ['合计', '派遣工', '正式工'],
            dismissionNum: [558, 545, 13],
            dismissionRate: [17.7, 31.6, 0.9],
        };

        function getTableLine(num) {
            var list = [];
            var bottom = 80;
            var height = 40;
            for (var i = 0; i < num; i++) {
                list.push({
                    type: 'line',
                    bottom: bottom - i * height,
                    left: 15,
                    style: {
                        fill: '#333',
                        stroke: '#d5d5d5',
                    },
                    shape: {
                        x1: 0,
                        y1: 0,
                        x2: 1087,
                        y2: 0
                    }

                });
            }
            return list;
        }

        var lineList = getTableLine(2);


        var optionChart5555 = {
            title: [
                {
                    text: '单位：人',
                    right: '1%',
                    top: '1%',
                    textStyle: {
                        fontSize: 14,
                        color: '#9d9d9d',
                        fontWeight: 'lighter',
                    },
                },
                {
                    text: '本月',
                    left: '1%',
                    top: '1%',
                    textStyle: {
                        fontSize: 16,
                        color: '#9d9d9d',
                        fontWeight: 'bold',
                    },
                },
                {
                    text: '  \n项目\n离职人数',
                    bottom: 30,
                    left: 32,
                    textStyle: {
                        lineHeight: 40,
                        fontSize: 14,
                        fontWeight: 'normal',
                        formatter: function (value) {
                            return '{table|' + value + '}';
                        },
                        rich: {
                            table: {
                                align: 'center'
                            }
                        }
                    }
                }],
            grid: {
                bottom: 125,
                left: 120,
                right: 20,
                top: '12%',
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                data: data.title,
                axisLine: {
                    lineStyle: {
                        color: '#d5d5d5', // 更改坐标轴颜色
                    }
                },
                axisTick: {
                    length: 85, // 竖线的长度
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#333',
                    },
                    formatter: function (value, index) {
                        var indexNum = 0;
                        for (var i = 0; i < data.title.length; i++) {
                            if (value == data.title[i]) {
                                indexNum = i;
                            }
                        }
                        return '{table|' + value +
                            '}\n{table|' + data.dismissionNum[indexNum] + '}';
                    },
                    rich: {
                        table: {
                            lineHeight: 40,
                            align: 'center',
                            fontSize: 14, // table里文字字体大小
                        }
                    }
                }
            }],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    maxInterval: 7, // 自动计算的坐标轴最小间隔大小。
                    //   splitNumber : 5,
                    silent: false, // 坐标轴是否是静态无法交互
                    max: 35,
                    min: 0,
                    axisLine: {
                        show: true,
                        lineStyle: { // 刻度线的样式设置。
                            color: '#d5d5d5', // 刻度线的颜色
                            width: 1,
                            type: 'solid',
                        },
                    },
                    axisTick: {
                        show: true,
                        inside: true, // 坐标轴刻度是否朝内，默认朝外。
                        lineStyle: { // 刻度线的样式设置。
                            color: '#d5d5d5', // 刻度线的颜色
                            width: 1,
                            type: 'solid',
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value} %',
                        color: '#191919',
                        fontWeight: 'bold',
                        fontSize: 14,
                    }

                },
            ],
            series: [
                {
                    name: '离职率',
                    type: 'bar',
                    barWidth: 46,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#eb6776', '#3cadfd', '#fdad3c'];
                                return colorList[params.dataIndex];
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c} %',
                                textStyle: {  //数值样式
                                    fontSize: 14,
                                    color: 'auto',
                                }
                            },
                        },

                    },
                    yAxisIndex: 0,
                    data: data.dismissionRate
                },
            ],
            graphic: lineList
        };


        chartZhu5555.setOption(optionChart5555, true);


        /////
        var chartZhu6666 = echarts.init(document.getElementById('EchartZhu6666'));
        const labelOption = {
            show: true,
            position: "insideBottom",
            distance: 19,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {}
            }
        };

        var optionChart6666 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['生产量', '销量', '库存量']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: ['period001', 'period002', 'period003', 'period004', 'period005']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '生产量',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390]
                },
                {
                    name: '销量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290]
                },
                {
                    name: '库存量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190]
                },
            ]
        };
        chartZhu6666.setOption(optionChart6666, true);

        //////
        var chartZhu7777 = echarts.init(document.getElementById('EchartZhu7777'));

        var xData = (function () {
            var data = ['11.29', '11.30', '12.01', '12.02', '12.03', '12.04', '12.05', '12.06', '12.07'];
            return data;
        })();

        var optionChart7777 = {
            backgroundColor: '#0c1f50',
            legend: {

                data: ['待解决', '已解决', '已关闭', '累计task数'],
                left: 'center',
                top: 30,
                itemWidth: 16.7,
                itemHeight: 7.6,
                type: 'plain',
                textStyle: {
                    color: 'RGBA(154, 209, 253, 1)',
                },
            },
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                borderWidth: 0,
                top: 100,
                bottom: 80,
                left: 55,
                right: 25,
                textStyle: {
                    color: '#fff',
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)',
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        color: 'rgba(255,255,255,0.7)',
                        fontSize: 10,
                    },
                    data: xData,
                },
            ],
            yAxis: [
                {
                    name: '个',
                    nameTextStyle: {
                        color: '#FDFDFD',
                        padding: [0, 0, 0, -50],
                    },
                    nameGap: 15,
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'RGBA(3, 75, 97, 0.4)',
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        color: 'rgba(255,255,255,0.5)',
                        fontSize: 10,
                        formatter: (value) => {
                            return Math.abs(value);
                        },
                    },
                    splitArea: {
                        show: false,
                    },
                },
            ],
            series: [
                {
                    name: '待解决',
                    type: 'bar',
                    stack: '1',
                    barMaxWidth: 15,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#956FD4'},
                                {offset: 1, color: '#3EACE5'},
                            ]),
                        },
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        distance: 10,
                        color: '#fff',
                        fontSize: '10px',
                    },
                    data: [110, 154, 45, 144, 144, 23, 90, 75, 56],
                },


                {
                    name: '已解决',
                    type: 'bar',
                    stack: '1',
                    barMaxWidth: 20,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0.5, color: 'rgba(149,111,211,0.5)'},
                                {offset: 0, color: 'rgba(149,111,211,0.3)'},
                                {offset: 1, color: 'rgba(149,111,211,0)'},
                            ]),
                        },
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        distance: 10,
                        color: '#fff',
                        fontSize: '10px',
                    },
                    data: [160, 341, 458, 145, 147, 132, 200, 154, 190],
                },
                {
                    name: '已关闭',
                    type: 'bar',
                    stack: '1',
                    barMaxWidth: 20,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0.3, color: 'rgba(62,172,229,0.6)'},
                                {offset: 0.5, color: 'rgba(62,172,229,0.3)'},
                                {offset: 1, color: 'rgba(62,172,229,0.1)'},
                            ]),
                        },
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        distance: 10,
                        color: '#fff',
                        fontSize: '10px',
                        formatter: (value) => {
                            return Math.abs(value.data);
                        },
                    },
                    data: [-100, -141, -88, -145, -67, -90, -50, -30, -45],
                },
                {
                    name: '累计task数',
                    type: 'line',
                    symbolSize: 3,
                    symbol: 'emptyCircle',
                    itemStyle: {
                        normal: {
                            color: '#FFC130',
                            barBorderRadius: '100%',
                        },
                        borderWidth: 0,
                    },
                    smooth: true,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FF8B77', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#FE6AAC', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    data: [350, 600, 650, 1100, 1150, 1200, 1230, 1500, 1530, 1540],
                },
            ],
        };

        chartZhu7777.setOption(optionChart7777, true);


        //////
        var chartZhu8888 = echarts.init(document.getElementById('EchartZhu8888'));
        var optionChart8888 = {

            backgroundColor: '#fcfdff',
            series: [
                {
                    type: 'gauge',
                    radius: '82%',
                    min: 0,
                    max: 100,
                    startAngle: 90,
                    endAngle: -270,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 4,
                            color: [[1, 'rgba(76,99,112,0.3)']],
                        },
                    },
                    axisTick: {
                        // 刻度
                        show: true,
                        splitNumber: 10,
                        length: 16,
                        distance: -20,
                        lineStyle: {
                            width: 2,
                            color: 'rgba(245,6,42,0.3)',
                        },
                    },
                    splitLine: {
                        // 分割线
                        show: false,
                    },
                    axisLabel: {
                        // 刻度标签
                        show: false,
                    },
                    pointer: {
                        // 仪表盘指针
                        show: false,
                    },
                    detail: {
                        // 仪表盘详情
                        show: false,
                    },
                },

                {
                    type: 'gauge',
                    radius: '75%',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false,
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: true,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#f5b20a',
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            width: 40,
                            color: [[1, 'rgba(17, 136, 255, .1)']],
                        },
                    },
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                        distance: 50,
                    },
                    data: [
                        {
                            value: 88.88,
                            name: '指标1',
                            title: {
                                offsetCenter: ['0%', '-52%'],
                            },
                            detail: {
                                offsetCenter: ['0%', '-39%'],
                            },
                            itemStyle: {
                                color: '#46f',
                            },
                        },

                        {
                            value: 45.33,
                            name: '指标2',
                            title: {
                                offsetCenter: ['0%', '-12%'],
                            },
                            detail: {
                                offsetCenter: ['0%', '1%'],
                            },
                            itemStyle: {
                                color: '#049f24',
                            },
                        },

                        {
                            value: 20,
                            name: '指标3',
                            title: {
                                offsetCenter: ['0%', '28%'],
                            },
                            detail: {
                                offsetCenter: ['0%', '40%'],
                            },
                            itemStyle: {
                                color: '#b711e5',
                            },
                        },
                    ],
                    title: {
                        fontSize: 14,
                        fontFamily: ['pingfang sc', 'serif', 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei'],
                        color: '#e70b0b',
                    },
                    detail: {
                        width: 50,
                        height: 14,
                        fontSize: 14,
                        fontFamily: ['pingfang sc', 'serif', 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei'],
                        color: 'auto',
                        borderColor: 'auto',
                        borderRadius: 20,
                        borderWidth: 0.6,
                        formatter: '{value}%',
                    },
                },
            ],
        };

        chartZhu8888.setOption(optionChart8888, true);
    });
</script>
</html>